<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 基础用法收集 | 我的世界</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/notes/favicon.ico">
    <link rel="manifest" href="/notes/manifest.json">
    <meta name="description" content="学习，生活，还有美食~">
    
    <link rel="preload" href="/notes/assets/css/0.styles.8453c794.css" as="style"><link rel="preload" href="/notes/assets/js/app.f19b5e39.js" as="script"><link rel="preload" href="/notes/assets/js/2.69392339.js" as="script"><link rel="preload" href="/notes/assets/js/3.48b2b659.js" as="script"><link rel="preload" href="/notes/assets/js/14.e376f3f7.js" as="script"><link rel="prefetch" href="/notes/assets/js/10.4748ef2e.js"><link rel="prefetch" href="/notes/assets/js/11.4ec67c3b.js"><link rel="prefetch" href="/notes/assets/js/12.db234a0a.js"><link rel="prefetch" href="/notes/assets/js/13.0bdeeeea.js"><link rel="prefetch" href="/notes/assets/js/15.873f63d0.js"><link rel="prefetch" href="/notes/assets/js/16.6d650151.js"><link rel="prefetch" href="/notes/assets/js/17.f0bcb5c9.js"><link rel="prefetch" href="/notes/assets/js/18.7dffee3a.js"><link rel="prefetch" href="/notes/assets/js/19.5f0252c4.js"><link rel="prefetch" href="/notes/assets/js/20.abea2681.js"><link rel="prefetch" href="/notes/assets/js/21.252713aa.js"><link rel="prefetch" href="/notes/assets/js/22.c99488d0.js"><link rel="prefetch" href="/notes/assets/js/23.3839292f.js"><link rel="prefetch" href="/notes/assets/js/24.9cc2f325.js"><link rel="prefetch" href="/notes/assets/js/25.e9dcd2f1.js"><link rel="prefetch" href="/notes/assets/js/26.31898ae6.js"><link rel="prefetch" href="/notes/assets/js/27.88db2371.js"><link rel="prefetch" href="/notes/assets/js/28.2d29c56c.js"><link rel="prefetch" href="/notes/assets/js/29.a0b42251.js"><link rel="prefetch" href="/notes/assets/js/30.9b38a2bb.js"><link rel="prefetch" href="/notes/assets/js/31.d374da8e.js"><link rel="prefetch" href="/notes/assets/js/32.7868c3f3.js"><link rel="prefetch" href="/notes/assets/js/33.87730e15.js"><link rel="prefetch" href="/notes/assets/js/34.5a5b6c6e.js"><link rel="prefetch" href="/notes/assets/js/35.1deedbd4.js"><link rel="prefetch" href="/notes/assets/js/36.d39f2b24.js"><link rel="prefetch" href="/notes/assets/js/37.d87637b4.js"><link rel="prefetch" href="/notes/assets/js/38.d118907c.js"><link rel="prefetch" href="/notes/assets/js/39.9f2c8514.js"><link rel="prefetch" href="/notes/assets/js/4.161aee82.js"><link rel="prefetch" href="/notes/assets/js/40.917feb30.js"><link rel="prefetch" href="/notes/assets/js/41.78e1b969.js"><link rel="prefetch" href="/notes/assets/js/42.cd6ac9d4.js"><link rel="prefetch" href="/notes/assets/js/43.961a438d.js"><link rel="prefetch" href="/notes/assets/js/44.ef1661d7.js"><link rel="prefetch" href="/notes/assets/js/45.b89cd059.js"><link rel="prefetch" href="/notes/assets/js/46.8ca9e560.js"><link rel="prefetch" href="/notes/assets/js/47.a35bec74.js"><link rel="prefetch" href="/notes/assets/js/48.953bb15e.js"><link rel="prefetch" href="/notes/assets/js/49.ae614c87.js"><link rel="prefetch" href="/notes/assets/js/5.ef4783db.js"><link rel="prefetch" href="/notes/assets/js/50.a9fbc190.js"><link rel="prefetch" href="/notes/assets/js/51.12ae367b.js"><link rel="prefetch" href="/notes/assets/js/52.57a5efe4.js"><link rel="prefetch" href="/notes/assets/js/53.861eb65b.js"><link rel="prefetch" href="/notes/assets/js/54.3bc1c9a1.js"><link rel="prefetch" href="/notes/assets/js/55.f724b26c.js"><link rel="prefetch" href="/notes/assets/js/56.02e48e7a.js"><link rel="prefetch" href="/notes/assets/js/6.72ed1ea6.js"><link rel="prefetch" href="/notes/assets/js/7.f1e39dec.js"><link rel="prefetch" href="/notes/assets/js/8.84b75613.js"><link rel="prefetch" href="/notes/assets/js/9.e1cd5390.js">
    <link rel="stylesheet" href="/notes/assets/css/0.styles.8453c794.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/notes/" class="home-link router-link-active"><img src="/notes/images/fish.gif" alt="我的世界" class="logo"> <span class="site-name can-hide">我的世界</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/notes/notes/" class="nav-link router-link-active">🎓 学习</a></div><div class="nav-item"><a href="/notes/life/" class="nav-link">🏸 生活</a></div> <a href="https://gitee.com/zgj6" target="_blank" rel="noopener noreferrer" class="repo-link">
    git
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/notes/notes/" class="nav-link router-link-active">🎓 学习</a></div><div class="nav-item"><a href="/notes/life/" class="nav-link">🏸 生活</a></div> <a href="https://gitee.com/zgj6" target="_blank" rel="noopener noreferrer" class="repo-link">
    git
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p title="学习笔记" class="sidebar-heading open"><span>学习笔记</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/notes/notes/" aria-current="page" title="目录 · 分类" class="sidebar-link">目录 · 分类</a></li><li><a href="/notes/notes/css_note.html" aria-current="page" title="CSS 基础用法收集" class="active sidebar-link">CSS 基础用法收集</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#html5" title="HTML5" class="sidebar-link">HTML5</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#外部调用css的写法" title="外部调用CSS的写法" class="sidebar-link">外部调用CSS的写法</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#告诉ie浏览器使用最新的ie内核渲染页面" title="告诉IE浏览器使用最新的IE内核渲染页面" class="sidebar-link">告诉IE浏览器使用最新的IE内核渲染页面</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#适应移动设备以及允许缩放" title="适应移动设备以及允许缩放" class="sidebar-link">适应移动设备以及允许缩放</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#在css中引入外部css" title="在CSS中引入外部CSS" class="sidebar-link">在CSS中引入外部CSS</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#点击穿透" title="点击穿透" class="sidebar-link">点击穿透</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#内部边框-怪异盒模型" title="内部边框（怪异盒模型）" class="sidebar-link">内部边框（怪异盒模型）</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#checkbox勾选后文字变色选择器" title="checkbox勾选后文字变色选择器" class="sidebar-link">checkbox勾选后文字变色选择器</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#偶数显示背景色" title="偶数显示背景色" class="sidebar-link">偶数显示背景色</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#大写字母" title="大写字母" class="sidebar-link">大写字母</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#自然段缩进2个空格" title="自然段缩进2个空格" class="sidebar-link">自然段缩进2个空格</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#css在前面和后面追加内容" title="CSS在前面和后面追加内容" class="sidebar-link">CSS在前面和后面追加内容</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#限制文字长度-多的字显示" title="限制文字长度，多的字显示“...”" class="sidebar-link">限制文字长度，多的字显示“...”</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#input-选中-focus-边框" title="input 选中（:focus）边框" class="sidebar-link">input 选中（:focus）边框</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#textarea-固定大小" title="textarea 固定大小" class="sidebar-link">textarea 固定大小</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#点击按钮不提交刷新页面" title="点击按钮不提交刷新页面" class="sidebar-link">点击按钮不提交刷新页面</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#使元素变大" title="使元素变大" class="sidebar-link">使元素变大</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#禁止鼠标选择" title="禁止鼠标选择" class="sidebar-link">禁止鼠标选择</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#css实现水平居中" title="CSS实现水平居中" class="sidebar-link">CSS实现水平居中</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#css实现垂直居中" title="CSS实现垂直居中" class="sidebar-link">CSS实现垂直居中</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#css居中" title="CSS居中" class="sidebar-link">CSS居中</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#css3-img-元素自适应" title="CSS3 img 元素自适应" class="sidebar-link">CSS3 img 元素自适应</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#webkit-移动设备点击时的覆盖颜色" title="webkit 移动设备点击时的覆盖颜色" class="sidebar-link">webkit 移动设备点击时的覆盖颜色</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#鼠标选择文字的背景色" title="鼠标选择文字的背景色" class="sidebar-link">鼠标选择文字的背景色</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#ie浏览器-兼容-代码" title="IE浏览器&quot;兼容&quot;代码" class="sidebar-link">IE浏览器&quot;兼容&quot;代码</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#媒体查询" title="媒体查询" class="sidebar-link">媒体查询</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#rem-em-单位" title="rem/em 单位" class="sidebar-link">rem/em 单位</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#clearfix-清除浮动" title=".clearfix 清除浮动" class="sidebar-link">.clearfix 清除浮动</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#去除input账号密码自动填充的黄色背景" title="去除input账号密码自动填充的黄色背景" class="sidebar-link">去除input账号密码自动填充的黄色背景</a></li><li class="sidebar-sub-header"><a href="/notes/notes/css_note.html#移除-input-type-number-小箭头" title="移除 input [type=number]小箭头" class="sidebar-link">移除 input [type=number]小箭头</a></li></ul></li><li><a href="/notes/notes/fe-effects-collection.html" title="前端实用特效 · Demo" class="sidebar-link">前端实用特效 · Demo</a></li><li><a href="/notes/notes/git-notes.html" title="git 笔记" class="sidebar-link">git 笔记</a></li><li><a href="/notes/notes/js-notes.html" title="JavaScript 笔记" class="sidebar-link">JavaScript 笔记</a></li><li><a href="/notes/notes/nodejs-notes.html" title="Node.js学习" class="sidebar-link">Node.js学习</a></li><li><a href="/notes/notes/ports.html" title="端口占用查询" class="sidebar-link">端口占用查询</a></li><li><a href="/notes/notes/vuepress.html" title="vuepress使用中遇到的问题" class="sidebar-link">vuepress使用中遇到的问题</a></li><li><a href="/notes/notes/windows.html" title="Windows" class="sidebar-link">Windows</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p title="JavaScript 高程笔记" class="sidebar-heading"><span>JavaScript 高程笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="HTTP" class="sidebar-heading"><span>HTTP</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="微信小程序" class="sidebar-heading"><span>微信小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="TS" class="sidebar-heading"><span>TS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="Vite" class="sidebar-heading"><span>Vite</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="interviewquestion" class="sidebar-heading"><span>interviewquestion</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="AI" class="sidebar-heading"><span>AI</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p title="UE" class="sidebar-heading"><span>UE</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-基础用法收集"><a href="#css-基础用法收集" class="header-anchor">#</a> CSS 基础用法收集</h1> <h2 id="html5"><a href="#html5" class="header-anchor">#</a> HTML5</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ie=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="外部调用css的写法"><a href="#外部调用css的写法" class="header-anchor">#</a> 外部调用CSS的写法</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>style.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>

<span class="token comment">&lt;!-- 一种标准的写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>style.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="告诉ie浏览器使用最新的ie内核渲染页面"><a href="#告诉ie浏览器使用最新的ie内核渲染页面" class="header-anchor">#</a> 告诉IE浏览器使用最新的IE内核渲染页面</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=EDGE<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="适应移动设备以及允许缩放"><a href="#适应移动设备以及允许缩放" class="header-anchor">#</a> 适应移动设备以及允许缩放</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="在css中引入外部css"><a href="#在css中引入外部css" class="header-anchor">#</a> 在CSS中引入外部CSS</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;animate.css&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span></span>
</code></pre></div><h2 id="点击穿透"><a href="#点击穿透" class="header-anchor">#</a> 点击穿透</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.demo</span> <span class="token punctuation">{</span>
    <span class="token property">pointer-events</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="内部边框-怪异盒模型"><a href="#内部边框-怪异盒模型" class="header-anchor">#</a> 内部边框（怪异盒模型）</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.contact_banner</span> <span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 42px solid #ff674d<span class="token punctuation">;</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
    <span class="token property">-moz-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
    <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="checkbox勾选后文字变色选择器"><a href="#checkbox勾选后文字变色选择器" class="header-anchor">#</a> checkbox勾选后文字变色选择器</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.time_con ul li input[type=checkbox]:checked+.cb-label</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #f58612<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.time_con ul li input[type=checkbox]:checked+.cb-label+.time_info</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #f58612<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="偶数显示背景色"><a href="#偶数显示背景色" class="header-anchor">#</a> 偶数显示背景色</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.news-list:nth-of-type(even)</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #fafafa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="大写字母"><a href="#大写字母" class="header-anchor">#</a> 大写字母</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">h1</span> <span class="token punctuation">{</span><span class="token property">text-transform</span><span class="token punctuation">:</span>uppercase<span class="token punctuation">}</span>
<span class="token selector">h2</span> <span class="token punctuation">{</span><span class="token property">text-transform</span><span class="token punctuation">:</span>capitalize<span class="token punctuation">}</span>
<span class="token selector">p</span> <span class="token punctuation">{</span><span class="token property">text-transform</span><span class="token punctuation">:</span>lowercase<span class="token punctuation">}</span>
</code></pre></div><h2 id="自然段缩进2个空格"><a href="#自然段缩进2个空格" class="header-anchor">#</a> 自然段缩进2个空格</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.demo</span> <span class="token punctuation">{</span>
    <span class="token property">text-indent</span><span class="token punctuation">:</span>2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="css在前面和后面追加内容"><a href="#css在前面和后面追加内容" class="header-anchor">#</a> CSS在前面和后面追加内容</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#xn_n_18_navHome&gt;a:before</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">'HOME'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">p:after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">&quot;台词：&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="限制文字长度-多的字显示"><a href="#限制文字长度-多的字显示" class="header-anchor">#</a> 限制文字长度，多的字显示“...”</h2> <p><img src="/notes/assets/img/css-text-length-limit.a83cc9ba.png" alt="限制文字长度"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.xn_c_34_lbenname</span> <span class="token punctuation">{</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
    <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
    <span class="token property">max-width</span><span class="token punctuation">:</span> 470px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="input-选中-focus-边框"><a href="#input-选中-focus-边框" class="header-anchor">#</a> input 选中（:focus）边框</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.demo</span> <span class="token punctuation">{</span>
    <span class="token property">outline-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>77<span class="token punctuation">,</span> 144<span class="token punctuation">,</span> 254<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.con3input:focus,.con3texta:focus</span> <span class="token punctuation">{</span>
    <span class="token property">border-color</span><span class="token punctuation">:</span> #FFEB3B<span class="token punctuation">;</span>
    <span class="token property">outline-color</span><span class="token punctuation">:</span> #FFEB3B<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">::-webkit-input-placeholder</span> <span class="token punctuation">{</span> <span class="token comment">/* WebKit browsers */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">:-moz-placeholder</span> <span class="token punctuation">{</span> <span class="token comment">/* Mozilla Firefox 4 to 18 */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">::-moz-placeholder</span> <span class="token punctuation">{</span> <span class="token comment">/* Mozilla Firefox 19+ */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">:-ms-input-placeholder</span> <span class="token punctuation">{</span> <span class="token comment">/* Internet Explorer 10+ */</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="textarea-固定大小"><a href="#textarea-固定大小" class="header-anchor">#</a> textarea 固定大小</h2> <p><code>resize: none;</code></p> <h2 id="点击按钮不提交刷新页面"><a href="#点击按钮不提交刷新页面" class="header-anchor">#</a> 点击按钮不提交刷新页面</h2> <p><code>&lt;button type=&quot;button&quot;&gt;提交&lt;/button&gt;</code></p> <h2 id="使元素变大"><a href="#使元素变大" class="header-anchor">#</a> 使元素变大</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2.0<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="禁止鼠标选择"><a href="#禁止鼠标选择" class="header-anchor">#</a> 禁止鼠标选择</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.article-holder.unable-reprint</span> <span class="token punctuation">{</span>
    <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="css实现水平居中"><a href="#css实现水平居中" class="header-anchor">#</a> CSS实现水平居中</h2> <p><img src="/notes/assets/img/css-horizontal-center-1.f3e4433d.png" alt="DEMO"> <img src="/notes/assets/img/css-horizontal-center-2.bf3f9c8e.png" alt="DEMO"> <img src="/notes/assets/img/css-horizontal-center-3.ecad63ce.png" alt="DEMO"> <img src="/notes/assets/img/css-horizontal-center-4.d4264de7.png" alt="DEMO"> <img src="/notes/assets/img/css-horizontal-center-5.f1a3fcfc.png" alt="DEMO"></p> <h2 id="css实现垂直居中"><a href="#css实现垂直居中" class="header-anchor">#</a> CSS实现垂直居中</h2> <p><img src="/notes/assets/img/css-vertical-center-1.b1560397.png" alt="DEMO"> <img src="/notes/assets/img/css-vertical-center-2.4a8cb199.png" alt="DEMO"> <img src="/notes/assets/img/css-vertical-center-3.720dcbdc.png" alt="DEMO"></p> <h2 id="css居中"><a href="#css居中" class="header-anchor">#</a> CSS居中</h2> <p><img src="/notes/assets/img/css-center-1.524a06c0.png" alt="DEMO"> <img src="/notes/assets/img/css-center-2.183fa9e6.png" alt="DEMO"> <img src="/notes/assets/img/css-center-3.1613ff62.png" alt="DEMO"></p> <h2 id="css3-img-元素自适应"><a href="#css3-img-元素自适应" class="header-anchor">#</a> CSS3 img 元素自适应</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">img</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">object-fit</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="webkit-移动设备点击时的覆盖颜色"><a href="#webkit-移动设备点击时的覆盖颜色" class="header-anchor">#</a> webkit 移动设备点击时的覆盖颜色</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">a:active</span> <span class="token punctuation">{</span>
    <span class="token property">-webkit-tap-highlight-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 166<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.555<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="鼠标选择文字的背景色"><a href="#鼠标选择文字的背景色" class="header-anchor">#</a> 鼠标选择文字的背景色</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">::selection</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 166<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.555<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="ie浏览器-兼容-代码"><a href="#ie浏览器-兼容-代码" class="header-anchor">#</a> IE浏览器&quot;兼容&quot;代码</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--[if lt IE 9]&gt;
      &lt;script src=&quot;http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;</span>
    <span class="token comment">&lt;!--[if lt IE 9]&gt;
  &lt;script&gt;
    var tip = '建议升级您的浏览器（如 Chrome, Firefox）以获得更好的体验！',
        url = 'http://browsehappy.com';
    document.execCommand('stop');
    alert(tip);
    window.location.href = url;
  &lt;/script&gt;
&lt;![endif]--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--[if lte IE8]&gt;
        &lt;p class=&quot;update-browser&quot;&gt;您使用的浏览器版本较低，可能存在严重的安全隐患或导致页面显示异常，建议&lt;a href=&quot;http://browsehappy.osfipin.com/&quot; target=&quot;_blank&quot;&gt;立即升级&lt;/a&gt;浏览器。
        &lt;/p&gt;
    &lt;![endif]--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="媒体查询"><a href="#媒体查询" class="header-anchor">#</a> 媒体查询</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* 最大屏幕限制：800px，小于该分辨率的使用此样式 */</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 481px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* 屏幕宽度在：481~800px之间 */</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 480px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* 最大屏幕限制：480px，小于该分辨率的使用此样式 */</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="rem-em-单位"><a href="#rem-em-单位" class="header-anchor">#</a> rem/em 单位</h2> <p><img src="/notes/assets/img/html-font-size.eb86ae19.png" alt="fontSize"> <img src="/notes/assets/img/rem.98343003.png" alt="rem"> <img src="/notes/assets/img/em.f65c21e2.png" alt="em"></p> <h2 id="clearfix-清除浮动"><a href="#clearfix-清除浮动" class="header-anchor">#</a> .clearfix 清除浮动</h2> <p>清除浮动主要有两种实现方式，一种是<code>overflow:hidden</code>，但最好的方式还是使用下面这种，这也是 Bootstrap 使用的方法：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.clearfix::before,
.clearfix::after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot; &quot;</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.clearfix::after</span> <span class="token punctuation">{</span>
    <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="去除input账号密码自动填充的黄色背景"><a href="#去除input账号密码自动填充的黄色背景" class="header-anchor">#</a> 去除input账号密码自动填充的黄色背景</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">input:-webkit-autofill</span> <span class="token punctuation">{</span>
    <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 0 0px 1000px #ffffff inset <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">-webkit-text-fill-color</span><span class="token punctuation">:</span> #313a69 <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="移除-input-type-number-小箭头"><a href="#移除-input-type-number-小箭头" class="header-anchor">#</a> 移除 input [type=number]小箭头</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button</span> <span class="token punctuation">{</span>
  <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023-4-5 17:45:19</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/notes/notes/" class="prev router-link-active">目录 · 分类</a></span> <span class="next"><a href="/notes/notes/fe-effects-collection.html">前端实用特效 · Demo</a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:65px;bottom:0px;width:135px;height:300px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="135" height="300" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:135px;height:300px;"></canvas></div></div></div>
    <script src="/notes/assets/js/app.f19b5e39.js" defer></script><script src="/notes/assets/js/2.69392339.js" defer></script><script src="/notes/assets/js/3.48b2b659.js" defer></script><script src="/notes/assets/js/14.e376f3f7.js" defer></script>
  </body>
</html>
